<template>
  <div class="ratings" ref="ratings" :style="{height}">
    <div class="ratings-content">
      <div class="overview">
        <span>4.6</span>
        <div class="div1">
          <p>商家评分</p>
          <van-icon name="star-o" size="28" color="#ed7a1c" class="van-icon" />
          <van-icon name="star-o" size="28" color="#ed7a1c" class="van-icon" />
          <van-icon name="star-o" size="28" color="#ed7a1c" class="van-icon" />
          <van-icon name="star-o" size="28" color="#ed7a1c" class="van-icon" />
        </div>
        <div class="div2">
          <p class="p1">口味</p>
          <p class="p2">4.7</p>
        </div>
        <div class="div3">
          <p class="p1">包装</p>
          <p class="p2">4.7</p>
        </div>
        <div class="div4">
          <p class="p1">配送满意度</p>
          <p class="p2">99%</p>
        </div>
      </div>
      <div class="color"></div>
      <div class="ratingselect">
        <div class="rating-type border-1px">
          <span class="block positive" :class="{active: selectType===2}" @click="setSelectType(2)">
            全部
            <span class="count">{{ratings.length}}</span>
          </span>
          <span class="block positive" :class="{active: selectType===0}" @click="setSelectType(0)">
            满意
            <span class="count">{{positiveSize}}</span>
          </span>
          <span class="block negative" :class="{active: selectType===1}" @click="setSelectType(1)">
            不满意
            <span class="count">{{ratings.length-positiveSize}}</span>
          </span>
        </div>
        <div class="switch" :class="{on: onlyShowText}" @click="toggleOnlyShowText">
          <span class="iconfont icon-icon-checkcircle-line"></span>
          <span class="text">只看有内容的评价</span>
        </div>
      </div>
      <div class="rating-wrapper">
      <ul>
        <li class="rating-item" v-for="(rating, index) in filterRatings" :key="index">
          <div class="avatar">
            <img width="28" height="28" :src="rating.avatar" />
          </div>
          <div class="content">
            <h1 class="name">{{rating.username}}</h1>
            <div class="star-wrapper">
              <van-icon name="star-o" size="20" color="#ed7a1c" class="van-icon" />
              <van-icon name="star-o" size="20" color="#ed7a1c" class="van-icon" />
              <van-icon name="star-o" size="20" color="#ed7a1c" class="van-icon" />
              <van-icon name="star-o" size="20" color="#ed7a1c" class="van-icon" />
              <span class="delivery">{{rating.deliveryTime}}</span>
            </div>
            <p class="text">{{rating.text}}</p>
            <div class="recommend">
              <span
                class="iconfont"
                :class="rating.rateType===0 ? 'icon-thumb_up' : 'icon-thumb_down'"
              ></span>
              <span class="item" v-for="(item, index) in rating.recommend" :key="index">{{item}}</span>
            </div>
            <div class="time">{{rating.rateTime | date-format}}</div>
          </div>
        </li>
      </ul>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon,Toast } from "vant";
Vue.use(Icon);
Vue.use(Toast);
import BScroll from "better-scroll";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      onlyShowText: true, // 是否只显示有文本的
      selectType: 2, // 选择的评价类型: 0满意, 1不满意, 2全部  按照类型跳转
      height: 0,
      scroll: null, //滚动对象
    };
  },
  async mounted() {
    const res = await this.$axios.get("/ratings");
    // console.log(res.data.data);
    const ratings = res.data.data;
    this.$store.dispatch("goods/receive_ratings", ratings);
    this.height = document.documentElement.clientHeight -120  + "px";
    this.$nextTick(() => {
      this.scroll=new BScroll(".ratings", {
        click: true,
        pullUpLoad: true, //上拉加载
        pullDownRefresh: true, //下拉刷新
      });
      this.scroll.on("pullingUp",  () => {
      Toast('没有更多了');
      this.scroll.finishPullUp();
    });
    //下拉
    this.scroll.on("pullingDown", () => {
      Toast('正在加载...');
      this.scroll.finishPullDown();
    });
    });
   
  },
  computed: {
    ...mapState("goods", ["info", "ratings"]),
    ...mapGetters("goods", ["positiveSize"]),
    filterRatings() {
      // 得到相关的数据
      const { ratings, onlyShowText, selectType } = this;
      // 产生一个过滤新数组
      return ratings.filter((rating) => {
        const { rateType, text } = rating;
        /*
                      条件1:
                          selectType: 0/1/2
                          rateType: 0/1
                          selectType===2 || selectType===rateType
                      条件2
                          onlyShowText: true/false
                          text: 有值/没值
                          !onlyShowText || text.length>0
                     */
        return (
          (selectType === 2 || selectType === rateType) &&
          (!onlyShowText || text.length > 0)
        );
      });
    },
  },

  methods: {
    setSelectType(selectType) {
      this.selectType = selectType;
    },
    toggleOnlyShowText() {
      this.onlyShowText = !this.onlyShowText;
    },
  },
  //组件销毁前清除滚动
  beforeDestroy() {
    this.scroll = null;
    //清除提示框
    Toast.clear()
  },
};
</script>

<style lang="scss" scoped>
.ratings {
  width: 100%;
  overflow: hidden;
  .overview {
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    span {
      color: #ed7a1c;
      font-size: 30px;
      margin-right: 10px;
      font-weight: 500;
    }
    .div1 {
      p {
        font-size: 12px;
        color: #999;
      }
      .van-icon {
        margin-top: 3px;
      }
    }
    .div2 {
      margin-left: 50px;
      .p1 {
        font-size: 12px;
        color: #999;
      }
      .p2 {
        font-size: 17px;
        color: #000;
        margin-top: 3px;
      }
    }
    .div3 {
      margin-left: 30px;
      .p1 {
        font-size: 12px;
        color: #999;
      }
      .p2 {
        font-size: 17px;
        color: #000;
        margin-top: 3px;
      }
    }
    .div4 {
      margin-left: 55px;
      .p1 {
        font-size: 12px;
        color: #999;
      }
      .p2 {
        font-size: 17px;
        color: #000;
        margin-top: 3px;
      }
    }
  }
  .color {
    height: 10px;
    background-color: #f5f5f6;
  }
  .ratingselect {
    .rating-type {
      padding: 18px 0;
      .block {
        display: inline-block;
        padding: 8px 12px;
        margin-right: 8px;
        line-height: 16px;
        border-radius: 1px;
        font-size: 12px;
        color: rgb(77, 85, 93);
        background: rgba(77, 85, 93, 0.2);
        &.active {
          background: #ffc135;
          color: #fff;
        }
      }
      .count {
        margin-left: 2px;
        font-size: 8px;
      }
    }
    .switch {
      padding: 12px 18px;
      line-height: 24px;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      color: rgb(147, 153, 159);
      font-size: 0;
      &.on {
        .icon-icon-checkcircle-line {
          color: #ffc135;
        }
      }
      .icon-icon-checkcircle-line {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
        font-size: 24px;
      }
      .text {
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
      }
    }
  }
  .rating-wrapper {
    padding: 0 18px;
    .rating-item {
      display: flex;
      padding: 18px 0;
      border-bottom: rgba(7, 17, 27, 0.1);
      .avatar {
        flex: 0 0 28px;
        width: 28px;
        margin-right: 12px;
        img {
          border-radius: 50%;
          height: 30px;
          width: 30px;
        }
      }
      .content {
        position: relative;
        flex: 1;
        .name {
          margin-bottom: 4px;
          line-height: 12px;
          font-size: 10px;
          color: rgb(7, 17, 27);
        }
        .star-wrapper {
          margin-bottom: 6px;
          font-size: 0;

          .star {
            display: inline-block;
            margin-right: 6px;
            vertical-align: top;
          }
          .delivery {
            display: inline-block;
            vertical-align: top;
            line-height: 12px;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }
        .text {
          margin-bottom: 8px;
          line-height: 18px;
          color: rgb(7, 17, 27);
          font-size: 12px;
        }
        .recommend {
          line-height: 16px;
          font-size: 0;
          .icon-thumb_up,
          .icon-thumb_down,
          .item {
            display: inline-block;
            margin: 0 8px 4px 0;
            font-size: 9px;
          }
          .icon-thumb_up {
            color: yellow;
          }
          .icon-thumb_down {
            color: rgb(147, 153, 159);
          }
          .item {
            padding: 0 6px;
            border: 1px solid rgba(7, 17, 27, 0.1);
            border-radius: 1px;
            color: rgb(147, 153, 159);
            background: #fff;
          }
        }
        .time {
          position: absolute;
          top: 0;
          right: 0;
          line-height: 12px;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }
    }
  }
}
</style>
